<template>
<Row>
  <dtable :columns="columns" :dataAll="dataAll" :dataShow="dataShow" :loading="loading" add edit del op check @refresh="getall()" @show="show" @add="add" @del="del" @edit="edit"></dtable>
  <Modal title="资源信息" v-model="editData" :loading="loading" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="名称" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="api路径" prop="Url">
        <Input v-model="formItem.Url" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="图标" prop="Logo">
        <Input v-model="formItem.Logo" placeholder="请输入" :icon="formItem.Logo"></Input>
      </Form-item>
      <Form-item label="排序" prop="Seq">
        <Input v-model.number="formItem.Seq" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="类别" prop="Type">
        <Radio-group v-model.number="formItem.Type">
          <Radio :label="1">页面目录</Radio>
          <Radio :label="0">API功能</Radio>
          <Radio :label="2">操作标签</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="是否隐藏" prop="Hiden">
            <i-switch v-model="formItem.Hiden" >
                <span slot="open">隐藏</span>
                <span slot="close">不隐藏</span>
            </i-switch>
      </Form-item>
      <Form-item label="父目录" prop="Pid">
        <Select v-model="formItem.Pid" :disabled="isMenu">
            <Option v-for="item  in parentRes" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import api from '@/api';
import {
  mapMutations,
  mapGetters,
  mapState
} from 'vuex';
import {
  inputString
} from '@/common/utils';
import dtable from '@/components/table/dtable.vue';
export default {
    data () {
      return {
        loading: false,
        columns: [{
          title: '名称',
          key: 'Name',
          sortable: true
      },
      {
          title: '类别',
          key: 'Tname',
          sortable: true
      },
      {
          title: '父路径',
          key: 'Pname',
          sortable: true
      },
      {
          title: 'ApiUrl',
          key: 'Url',
          sortable: true
      },
      {
          title: 'Logo',
          key: 'Logo',
          render: (h, params) => {
              return h('Icon', {
                props: {
                  type: params.row.Logo
              }
            })
          }
      }
      ],
        dataShow: true, // 是否显示表格数据查看表单
        dataAll: [],
        spinShow: false,
        editData: false,
        addid: 0,
        formItem: {
          Name: '',
          Url: '',
          Logo: 'plus',
          Hiden: false,
          Type: 0,
          Seq: 100,
          Pid: '0',
          Remark: ''
      },
        ruleValidate: {
          Name: [{
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
        }],
          Url: [{
            required: true,
            message: '路径不能为空',
            trigger: 'blur'
        }],
          Logo: [{
            required: true,
            message: 'logo不能为空',
            trigger: 'change'
        }]
      }
    }
  },
    components: {
      dtable
  },
    computed: {
      ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
      filiterTableDate () {
        let e = this.dataAll.slice()
      let keys = this.searchKey
      let filterData = function (element) {
          if (keys === '') {
            return true
        }
          for (let o in element) {
            if (String(element[o]).indexOf(keys) >= 0) {
              return true
          }
        }
          return false
      };
        let fdata = e.filter(filterData)
      this.total = fdata.length
      return fdata
    },
      curTableData () {
        let from = this.pageSize * (this.current - 1)
      let to = from + this.pageSize
      return this.filiterTableDate.slice(from, to)
    },
    //      父资源
      parentRes () {
        let pr = []
      pr.push({
          Id: '0',
          Name: '根目录'
      })
      for (let e in this.dataAll) {
          if (this.dataAll[e].Type === 1) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
          })
        }
      }
      // console.log(pr)
        return pr
    },
      isMenu () {
        if (Number(this.formItem.Type) != 0) {
          return false
      } else {
          return true
      }
    }
  },
    watch: {},
    methods: {
      getall () {
        this.loading = true
      this.$api.getResource().then(res => {
          if (!res.error) {
            this.dataAll = res.Data
          this.total = res.Data.length
        } else {
            this.$Message.error(res.message)
        }
          this.loading = false
      })
    },
      show (row) {
        this.showItem = row
      this.showData = true
    },
      edit (index) {
        console.log(index)
      this.addid = 0
      this.formItem = index
      this.editData = true
    },
      add () {
        this.addid = 1
      this.$refs['editForm'].resetFields()
      this.editData = true
    },
      asyncOK () {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            if (this.addid === 0) {
              this.$api.updateResource(this.formItem).then(res => {
                if (!res.error) {
                  this.getall()
                this.$Message.success(res.message)
              } else {
                  this.$Message.error(res.message, 4)
              }
            })
          } else if (this.addid === 1) {
              this.$api.addResource(this.formItem).then(res => {
                if (!res.error) {
                  this.getall()
                this.$Message.success(res.message)
              } else {
                  this.$Message.error(res.message, 4)
              }
            })
          }
            setTimeout(() => {
              this.editData = false
          }, 500)
        } else {
            this.$Message.error('表单验证失败!')
        }
      })
    },
      asyncCancel () {
        this.getall()
    },
      del (row) {
        console.log(row)
      this.$api.deleteResource(row).then(res => {
          if (!res.error) {
            this.getall()
          this.$Message.success(res.message)
        } else {
            this.$Message.error(res.data.message, 4)
        }
      })
    }
  },
    mounted () {
      this.getall()
  }
}
</script>


